<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js + axios + api</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h1>显示列表</h1>
<div id="vue_user">
    {{info}}
    <p v-for="u in info">{{u.username}}+{{u.password}}</p>
    <el-table
            :data="info"
            border
            style="width: 100%">
        <el-table-column
                prop="username"
                label="用户名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码"
                width="180">
        </el-table-column>
        <el-table-column
                label="访问地址"
                width="180">
            <template slot-scope="scope">
                <a :href="scope.row._links.self.href">前往</a>
            </template>
        </el-table-column>
    </el-table>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_user',
        data: {},
        methods: {},
        data() {
            return {
                info: null
            }
        },
        mounted() {
            axios
                .get('http://localhost:7006/customers')
                .then(response => (this.info = response.data._embedded.customers))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
            console.log(this.info)
        }

    })

</script>
</body>
</html>